<template>
  <div class="blog-crecle">
    <!-- <transition-group name="list" tag="ul" enter-active-class="animate__animated animate__backInLeft" leave-active-class="animate__animated animate__backOutLeft" appear mode="out-in">
    <el-button :icon="item.iconName" circle v-for="(item, idx) in crecleData" :key="idx" @click="iconClick(item.route)"></el-button>
   </transition-group> -->

    <TransitionGroup name="crecle" tag="ul" appear mode="out-in">
      <!-- 如果遇到例外属性, 选择性渲染class类名和click事件, 需要将该标签摘出来 -->
      <ElButton
        v-for="(item, idx) in crecleData"
        :key="idx"
        :class="{ active: isActive(item) }"
        circle
        @click="iconClick(item)"
      >
        <SvgIcon :name="item.iconName" />
      </ElButton>
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
/*
  1. 实现BaseCrecleList组件, 首先实现静态数据组件爱你
  2. 书写数据, 根据数据渲染组件内容
  3. 书写逻辑, 根据什么修改数据

  更新数据, 每个路由有不同的crecle样式,
    根据路由的变换 to.name选择数据
    index中 write,
    article中 点赞, 收藏, 离开

*/

import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useLike } from '@/store/like'
import { $bus } from '@/unit/mitt'
import { showModal } from '@/unit/showModal'

import type { CrecleBaseType } from '@/config/crecle.config'
defineProps<{
  crecleData: CrecleBaseType[]
}>()
let like = useLike()
let route = useRoute()
let router = useRouter()
let aid = computed(() => {
  return route.params?.id
})
let isLikeState = computed(() => {
  return like.isLike(aid.value)
})
let isActive = computed(() => {
  return (item) => {
    // 实现computed作为函数传递参数
    return isLikeState.value && item.exec
  }
})

const clickMap = {
  handleFocusTextarea() {
    $bus.emit('focusTextarea')
  },
  handlePostColumn() {
    showModal('postColumns')
  },
  handleChangeLike() {
    $bus.emit('changeLikes')
  },
}
function iconClick(item) {
  let { route, click } = item
  if (click) {
    clickMap[click] && clickMap[click]()
  }
  if (route) {
    router.push(route)
  }
}
</script>
<style lang="less" scoped>
@import url('@/assets/css/variable.less');

.blog-crecle {
  position: fixed;
}

.blog-crecle ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: @padding-space * 2;

  & .el-button {
    width: 48px;
    height: 48px;
    color: rgb(96 98 102);
    background-color: @bg-theme-color;
  }

  & .el-button + .el-button {
    margin: @padding-space * 1.5 0 0;
  }

  & .active {
    color: #7ab9d4;
  }

  & .el-button:focus {
    border-color: #dcdfe6 !important;
  }

  & .svg-icon {
    width: 20px;
    height: 20px;
  }
}

.crecle-enter,
.crecle-leave-to {
  transform: translateX(-180px);
}

.crecle-enter-active {
  transition: 0.5s;
}
</style>
